import { defineComponent } from 'vue';
import { organizeScore } from '@/api/home';
import '../../../style/index.less';
import { ElDatePicker, ElDialog, ElTable, ElTableColumn } from 'element-plus';
export default defineComponent({
  name: 'ItemTable',
  props: ['data'],
  setup(props: any, { emit, slots, expose }) {
    const dialogVisible = ref(false);
    const loading = ref(false);
    const data = ref([]) as any;
    const searchParams = reactive({
      date: new Date()
    });

    const getScoreDetail = () => {
      const month = ('' + (searchParams.date.getMonth() + 1)).padStart(2, '0');
      const year = searchParams.date.getFullYear();
      organizeScore({month:year + '-' + month}).then((res) => {
        JSON.stringify(res.data) !="[]" ? formatData(res.data) : (data.value = []);
      });
    };
    const formatData = (list?: AnyObject) => {
      list = list || (props.data as AnyObject);

      data.value = [
        {
          item: '产品平均合格率',
          finish: list.pass_rate+"%",
          ratio: `${list.pass_rate_total_score}/${list.pass_rate_score}`,
          finish_rate: list.pass_rate_finish_rate
        },
        {
          item: '生产事故',
          finish: list.trouble,
          ratio: `${list.trouble_total_score}/${list.trouble_score}`,
          finish_rate: list.trouble_finish_rate
        },
        {
          item: '客诉降幅',
          finish: list.complaint,
          ratio: `${list.complaint_total_score}/${list.complaint_score}`,
          finish_rate: list.complaint_finish_rate
        },
        {
          item: '退货率',
          finish: list.return_goods_rate+"%",
          ratio: `${list.return_goods_rate_total_score}/${list.return_goods_rate_score}`,
          finish_rate: list.return_goods_rate_finish_rate
        },
        {
          item: '合计',
          finish: '',
          ratio: `${list.total_score}/${list.score}`,
          finish_rate: list.finish_rate
        }
      ];
    };

    watch(
      () => dialogVisible.value,
      async (val: boolean) => {
        if (val) {
          searchParams.date = new Date();
          if (!props.data) {
            loading.value = true;
            const {data} = await organizeScore({});
            formatData(data)
            loading.value = false;
          }else{
            formatData();
          }          
        }
      }
    );
    expose({ dialogVisible });
    return () => (
      <ElDialog
        lock-scroll
        draggable
        v-model={dialogVisible.value}
        title="组织绩效"
        style={{ maxWidth: '800px', with: 'auto' }}
      >
        <div class="item_right">
          <ElDatePicker
            v-model={searchParams.date}
            type="month"
            class="month_selector"
            range-separator="/"
            clearable={false}
            // @ts-ignore
            onChange={getScoreDetail}
          />
        </div>
        <ElTable
          header-row-class-name="table_header"
          size="small"
          data={data.value}
          v-loading={loading.value}
        >
          <ElTableColumn prop="item" label="考核项" />
          <ElTableColumn prop="finish" label="实际完成" />
          <ElTableColumn prop="ratio" label="得分/占比" />
          <ElTableColumn width="65" label="完成率" v-slots={{ default: ({ row }: AnyObject) => <p>{row.finish_rate}%</p> }} />
        </ElTable>
      </ElDialog>
    );
  }
});
